<template>
<div>


  <div v-if="this.showType==1?true:false" class="mui-scroll-wrapper">
      <div v-if="mains">
    <div class="mui-scroll">
      <div class="center_l">
        <p class="number-title">生成号码框</p>
        <ul class="announce-result">
          <!-- TODO -->
        </ul>

        <P>
          笔数：
          <span class="allaNum">0</span>
        </P>
        <div class="Amount">
          <div>金额:</div>
          <div><input v-model="amount" style="width:60px" type="text"></div>
          <div><el-button size="mini" type="primary" @click="bet">下注</el-button></div>        
          <!-- <div>笔数：</div> -->
          <div>总金额：{{amount}}</div>
        </div>
      </div>

      <div class="center">
        <ul class="nav">
          <li data-id="1" class="curLi">二字定</li>
          <li data-id="2">三字定</li>
          <li data-id="3">四字定</li>
          <li data-id="4">二字现</li>
          <li data-id="5">三字现</li>
          <li data-id="6">四字现</li>
        </ul>
        <div class="choose">
          <!-- 定与配 -->
          <div class="choose-one">
            <div>
              <div id="ding">
                <span class="color2">定位置</span>
                <input id="one-first" data-id="1" checked type="radio" name="one-all" value="取" />
                <span>取</span>
                <input id="one-second" data-id="2" type="radio" name="one-all" value="除" />
                <span>除</span>
              </div>
              <div>
                <span class="color2">配数全转</span>
                <input id="one-third" data-id="3" type="radio" name="one-all" value="取" />
                <span>取</span>
                <input id="one-fourth" data-id="4" type="radio" name="one-all" value="除" />
                <span>除</span>
              </div>
            </div>
            <ul class="one-all-first">
              <li>
                <span>万</span>
                <br />
                <input id="w" type="number" @click="inputRule('#w')" />
              </li>
              <li>
                <span>千</span>
                <br />
                <input id="q" type="number" @click="inputRule('#q')" />
              </li>
              <li>
                <span>百</span>
                <br />
                <input id="b" type="number" @click="inputRule('#b')" />
              </li>
              <li>
                <span>十</span>
                <br />
                <input id="s" type="number" @click="inputRule('#s')" />
              </li>
              <li>
                <span>个</span>
                <br />
                <input id="g" type="number" @click="inputRule('#g')" />
              </li>
            </ul>
            <ul class="one-all-second">
              <input id="area-one" @click="inputRule('#area-one')" type="number" />
              <input id="area-two" @click="inputRule('#area-two')" type="number" />
              <input id="area-three" @click="inputRule('#area-two')" type="number" />
              <input id="area-four" @click="inputRule('#area-two')" type="number" />
            </ul>
          </div>
          <!-- 合分 -->
          <div class="choose-two">
            <div>
              <span class="color2">合分</span>
              <input name="all-two" type="radio" />
              <span>取</span>
              <input name="all-two" type="radio" />
              <span>除</span>
            </div>
            <ul class="inputs">
              <li>
                <p>
                  <span>1</span>
                  <input data-id="1" name="all-two-child" type="checkbox" />
                  <input data-id="2" name="all-two-child" type="checkbox" />
                  <input data-id="3" name="all-two-child" type="checkbox" />
                  <input data-id="4" name="all-two-child" type="checkbox" />
                  <input data-id="5" name="all-two-child" type="checkbox" />
                </p>
                <input id="two-first" name="two-input" type="number" @click="inputRule('#w')" />
              </li>
              <li>
                <p>
                  <span>2</span>
                  <input data-id="1" name="all-two-child" type="checkbox" />
                  <input data-id="2" name="all-two-child" type="checkbox" />
                  <input data-id="3" name="all-two-child" type="checkbox" />
                  <input data-id="4" name="all-two-child" type="checkbox" />
                  <input data-id="5" name="all-two-child" type="checkbox" />
                </p>
                <input id="two-second" name="two-input" type="number" @click="inputRule('#w')" />
              </li>
              <li>
                <p>
                  <span>3</span>
                  <input data-id="1" name="all-two-child" type="checkbox" />
                  <input data-id="2" name="all-two-child" type="checkbox" />
                  <input data-id="3" name="all-two-child" type="checkbox" />
                  <input data-id="4" name="all-two-child" type="checkbox" />
                  <input data-id="5" name="all-two-child" type="checkbox" />
                </p>
                <input id="two-third" name="two-input" type="number" @click="inputRule('#w')" />
              </li>
              <li>
                <p>
                  <span>4</span>
                  <input data-id="1" name="all-two-child" type="checkbox" />
                  <input data-id="2" name="all-two-child" type="checkbox" />
                  <input data-id="3" name="all-two-child" type="checkbox" />
                  <input data-id="4" name="all-two-child" type="checkbox" />
                  <input data-id="5" name="all-two-child" type="checkbox" />
                </p>
                <input id="two-fourth" name="two-input" type="number" @click="inputRule('#w')" />
              </li>
              <li>
                <p>
                  <span>5</span>
                  <input data-id="1" name="all-two-child" type="checkbox" />
                  <input data-id="2" name="all-two-child" type="checkbox" />
                  <input data-id="3" name="all-two-child" type="checkbox" />
                  <input data-id="4" name="all-two-child" type="checkbox" />
                  <input data-id="5" name="all-two-child" type="checkbox" />
                </p>
                <input id="two-fifth" name="two-input" type="number" @click="inputRule('#w')" />
              </li>
            </ul>
          </div>
          <!-- 不定位合分 -->
          <div class="choose-three">
            <ul>
              <li class="color2">不定位合分</li>
              <li>
                <div class="noDing-one">
                  <input id="noDing-one" name="all-three" data-id="1" type="radio" checked />
                  <span>两数合</span>
                </div>
                <div class="noDing-two">
                  <input id="noDing-two" name="all-three" data-id="2" type="radio" />
                  <span>三数合</span>
                </div>
                <div class="noDing-three">
                  <input id="noDing-three" name="all-three" data-id="3" type="radio" />
                  <span>四数合</span>
                </div>
              </li>
              <li>
                <input id="noDing-inputs" type="number" @click="inputRule('#noDing-inputs')" />
              </li>
            </ul>
          </div>
          <!-- 多重 -->
          <div class="choose-four">
            <div class="noDing-one">
              <input id="four-first" data-id="1" type="checkbox" name="four-all" value="取" />
              <span>取</span>
              <input id="four-second" data-id="2" type="checkbox" name="four-all" value="除" />
              <span>除</span>
              <span class="color2">(双重)</span>
            </div>
            <div class="noDing-three">
              <input id="four-third" data-id="3" type="checkbox" name="four-all" value="取" />
              <span>取</span>
              <input id="four-fourth" data-id="4" type="checkbox" name="four-all" value="除" />
              <span>除</span>
              <span class="color2">(双双重)</span>
            </div>
            <div class="noDing-two">
              <input id="four-fifth" data-id="5" type="checkbox" name="four-all" value="取" />
              <span>取</span>
              <input id="four-sixth" data-id="6" type="checkbox" name="four-all" value="除" />
              <span>除</span>
              <span class="color2">(三重)</span>
            </div>
            <div class="noDing-three">
              <input id="four-seventh" data-id="7" type="checkbox" name="four-all" value="取" />
              <span>取</span>
              <input id="four-eighth" data-id="8" type="checkbox" name="four-all" value="除" />
              <span>除</span>
              <span class="color2">(四重)</span>
            </div>
          </div>
          <!-- 兄弟 -->
          <div class="choose-four">
            <div class="noDing-one">
              <input id="five-first" data-id="1" type="checkbox" name="five-all" value="取" />
              <span>取</span>
              <input id="five-second" data-id="2" type="checkbox" name="five-all" value="除" />
              <span>除</span>
              <span class="color2">(二兄弟)</span>
            </div>
            <div class="noDing-two">
              <input id="five-third" data-id="3" type="checkbox" name="five-all" value="取" />
              <span>取</span>
              <input id="five-fourth" data-id="4" type="checkbox" name="five-all" value="除" />
              <span>除</span>
              <span class="color2">(三兄弟)</span>
            </div>
            <div class="noDing-three">
              <input id="five-fifth" data-id="5" type="checkbox" name="five-all" value="取" />
              <span>取</span>
              <input id="five-sixth" data-id="6" type="checkbox" name="five-all" value="除" />
              <span>除</span>
              <span class="color2">(四兄弟)</span>
            </div>
          </div>
          <!-- 对数 -->
          <div class="choose-five">
            <input id="six-first" data-id="1" type="checkbox" name="six-all" value="取" />
            <span>取</span>
            <input id="six-second" data-id="2" type="checkbox" name="six-all" value="除" />
            <span>除</span>
            <span class="color2">(对数)</span>
            <input id="six-one" type="number" @click="inputRule('#six-one')" />
            <input id="six-two" type="number" @click="inputRule('#six-two')" />
            <input id="six-three" type="number" @click="inputRule('#six-three')" />
          </div>
          <!-- 单双 -->
          <div class="choose-six">
            <div>
              <input id="seven1-first" data-id="1" type="checkbox" name="seven1-all" value="取" />
              <span>取</span>
              <input id="seven1-second" data-id="2" type="checkbox" name="seven1-all" value="除" />
              <span>除</span>
              <span class="color2">(单)</span>
              <input id="seven1-one" data-id="1" type="checkbox" value />
              <input id="seven1-two" data-id="2" type="checkbox" value />
              <input id="seven1-three" data-id="3" type="checkbox" value />
              <input id="seven1-four" data-id="4" type="checkbox" value />
              <input id="seven1-five" data-id="5" type="checkbox" value />
            </div>
            <div>
              <input id="seven2-first" data-id="1" type="checkbox" name="seven2-all" value="取" />
              <span>取</span>
              <input id="seven2-second" data-id="2" type="checkbox" name="seven2-all" value="除" />
              <span>除</span>
              <span class="color2">(双)</span>
              <input id="seven2-one" data-id="1" type="checkbox" value />
              <input id="seven2-two" data-id="2" type="checkbox" value />
              <input id="seven2-three" data-id="3" type="checkbox" value />
              <input id="seven2-four" data-id="4" type="checkbox" value />
              <input id="seven2-five" data-id="5" type="checkbox" value />
            </div>
          </div>
        </div>
        <!-- ----- -->
        <div class="btnType">
          <el-button @click="tijiao" type="primary" size="small" class="btn">提交</el-button>

          <el-button type="primary" size="small" @click="clear">清除</el-button>
        </div>
      </div>
    </div>
  </div>
  </div>
  <!-- 封盘 -->
  <div class="typeid" v-if="this.showType==2?true:false">
       <h1>已封盘</h1>
  </div>
</div>
</template>

<script>
import { mapState } from "Vuex";
import  {fast}  from "../assets/data.js";
export default {
  data() {
    return {
      mains:true,
       pritem:this.$route.query.titleid,
       amount:"",//总金额
      
       single:""
    };
  },
  created(){
     
  },
 
  computed:{
    ...mapState(["typedt","showType"]),
     user() {
      return JSON.parse(this.$store.state.userMsg);
    }
  },
  mounted() {
   $('.allaNum').text();
    console.log($('.allaNum').text(),9999)
    this.amount =  $('.allaNum').text()*this.amount
    fast.nav();
    fast.dingAndPei();
    fast.bdwClick();
    fast.cClick();
    fast.xdClick();
    fast.dsClick();
    fast.dansClick();
    
   
  },
  methods: {
    tijiao(){
       console.log(fast.submit())
       this.single = fast.submit()
      console.log(this.single,555)
    },
    //限制input输入内容
    inputRule(name) {
      var baseNum = "0123456789";
      $(name).bind("input propertychange", function() {
        var content = $(name)
          .val()
          .toString();
        var contentArr = content.split("");
        var set = new Set(contentArr);
        var newContentArr = Array.from(set);
        $(name).val(newContentArr.join(",").replace(/,/g, ""));
        if (
          $(name)
            .val()
            .indexOf(".") >= 0
        ) {
          $(name).val("");
        }
      });
    },
    clear() {
      console.log(321321);
    },
      automatic(){
       this.$api.post(
        this.$url.getInfo,
        {},
        res => {
          console.log(res.data,"余额刷新")
          if (res.data.code == 200) {
            this.$store.commit("getUserMsg", JSON.stringify(res.data.data));
          }
        }
      );
    },
    // 下注
    bet(){
     this.amount =  $('.allaNum').text()*this.amount
      this.$api.post(
        this.$url.buy,
        {
         module:this.typedt,
         amount:this.amount,
         items:this.single
        },
        res => {
          if (res.data.code == 200) {
           this.$message({
            message: "下注成功",
            type: "success"
          });
            this.automatic();
             this.mains = false
            setTimeout(()=>{
              this.mains = true
            },200)
             this.$router.go(0)
            this.amount = "",
            this.single = ""
            
          }else{
             this.$message.error(res.data.msg);
          }
        }
      );
    }
  }
};
</script>

<style lang="less" scope>
.typeid{
  display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
}
@color: #409eff;
@color2: #e6a23c;
.Amount{
  display: flex;
  margin-top: 40px;
  div:nth-child(1){
    margin-top: 5px;
  }
  div:nth-child(2) input{
    margin-left:10px;
    outline: none;
    margin-top: 5px;
  }
  div:nth-child(3){
    margin-left:10px;
   
  }
  div:nth-child(4){
     margin-left:10px;
    margin-top: 5px;
  }
  div:nth-child(5){
    margin-left:10px;
    margin-top: 5px;
  }
}
.color2 {
  color: @color2;
}
.color {
  color: @color;
}
//快选nav
.curLi {
  background-color: @color;
  color: #fff;
}

// -----------------------------------------
.center_l {
  border: 1px solid #999;
  width: 40%;
  float: left;
  box-sizing: border-box;
  min-height: 400px;
  padding: 20px;
  .announce-result {
    width: 100%;
    border: 1px solid #999;
    border-bottom: 0;
    border-right: 0;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
    max-height: 300px;
    overflow-y: scroll;
    > li {
      width: 16.666%;
      text-align: center;
      border-bottom: 1px solid #999;
      border-right: 1px solid #999;
      font-size: 14px;
      box-sizing: border-box;
    }
  }
}
.center {
  padding: 0 50px;
  box-sizing: border-box;
  width: 60%;
  float: left;
  .nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1em;
    border-bottom: 2px solid @color;
    li {
      padding: 0.2rem 0.1rem;
      box-sizing: border-box;
      border-radius: 4px 4px 0 0;
    }
  }
  .choose {
    border: 1px solid @color;
    padding-bottom: 0.7rem;
    .choose-one {
      font-size: 1em;
      border-bottom: 1px solid @color;
      > div:first-child {
        display: flex;
        justify-content: space-around;
        padding: 0.2rem 0;
        line-height: 40px;
        div {
          display: flex;
          justify-content: space-between;
          align-items: center;
          line-height: 40px;
          span,
          input {
            margin-right: 0.1rem;
          }
        }
      }
      > .one-all-first {
        display: flex;
        justify-content: space-between;
        border-top: 1px solid @color;
        li:last-child {
          border-right: 0;
        }
        li {
          padding: 0.1rem 0;
          text-align: center;
          width: 20%;
          border-right: 1px solid @color;
          input {
            width: 80%;
            height: 1rem;
            margin: 0;
            font-size: 16px;
            padding: 0;
          }
        }
      }
      > .one-all-second {
        display: none;
        justify-content: space-around;
        align-items: center;
        border-top: 1px solid @color;
        padding: 0.5rem 0;
        input {
          margin: 0;
          padding: 0;
          font-size: 1em;
          height: 1.2em;
          width: 30%;
        }
      }
    }
    .choose-two {
      > div:first-child {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1em;
        padding: 0.2rem 0;
        border-bottom: 1px solid @color;
        line-height: 40px;
        > input {
          margin: 0 0.1rem;
        }
      }
      .inputs {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid @color;
        box-sizing: border-box;
        li:last-child {
          border-right: 0;
        }
        li {
          border-right: 1px solid @color;
          box-sizing: border-box;
          > input {
            width: 80%;
            height: 1rem;
            display: block;
            font-size: 16px;
            margin: 0.2rem auto;
            padding: 0;
          }
          p {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            margin: 0.2rem 0 0 0;
          }
        }
      }
    }
    .choose-three {
      ul {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        font-size: 16px;
        padding: 0.2rem;
        box-sizing: border-box;
        border-bottom: 1px solid @color;
        li {
          margin-right: 0.1rem;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          > div {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-right: 0.2rem;
          }
        }
        input[type="number"] {
          width: 4rem;
          height: 1rem;
          display: block;
          font-size: 16px;
          padding: 0;
          margin: 0;
        }
      }
    }
    .choose-four {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      align-items: center;
      font-size: 16px;
      border-bottom: 1px solid @color;
      padding: 0.2rem 0.1rem;
      box-sizing: border-box;
      > div {
        width: 50%;
        display: flex;
        justify-content: space-around;
        align-items: center;
      }
    }
    .choose-five {
      font-size: 16px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      padding: 0.2rem 0.2rem;
      box-sizing: border-box;
      border-bottom: 1px solid @color;
      input[type="checkbox"],
      span {
        margin-right: 0.2rem;
      }
      input[type="number"] {
        width: 4em;
        height: 1em;
        display: block;
        font-size: 16px;
        padding: 0;
        margin: 0 0.2rem 0.2rem 0;
      }
    }
    .choose-six {
      padding: 0.2rem;
      box-sizing: border-box;
      font-size: 16px;
      input[type="checkbox"],
      span {
        margin-right: 0.2rem;
      }
    }
  }
  .btnType {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-top: 0.2rem;
    > button {
      width: 40%;
    }
  }
  .number-title {
    background-color: @color;
    padding: 0.1rem 0.2rem;
    box-sizing: border-box;
    color: #fff;
    font-size: 16px;
    margin-top: 16px;
    margin-bottom: 0;
  }
}
</style>